<template>
  <div class="container">
    <div class="header">登录配置</div>
    <div class="form-item">后台登录方式：</div>
    <div class="form-item c-label">
      <span> 账号密码登录</span
      ><el-switch
        :value="form.pcUserpass"
        @change="onChangedataStatus('pcUserpass', $event)"
        class="c-switch"
        active-value="1"
        inactive-value="0"
      ></el-switch>
    </div>
    <div class="form-item c-label">
      <span>微信扫码登录</span
      ><el-switch
        :value="form.pcScan"
        @change="onChangedataStatus('pcScan', $event)"
        class="c-switch"
        active-value="1"
        inactive-value="0"
      ></el-switch>
    </div>
    <div class="form-item">小程序登录方式：</div>
    <div class="form-item c-label">
      <span>账号密码登录</span
      ><el-switch
        :value="form.maUserpass"
        @change="onChangedataStatus('maUserpass', $event)"
        class="c-switch"
        active-value="1"
        inactive-value="0"
      ></el-switch>
    </div>
    <div class="form-item c-label">
      <span>微信快捷登录</span
      ><el-switch
        :value="form.maWechat"
        @change="onChangedataStatus('maWechat', $event)"
        class="c-switch"
        active-value="1"
        inactive-value="0"
      ></el-switch>
    </div>
    <div class="c-label c-tip">
      说明：关闭后将不可使用该方式进行登录，登录方式至少保留一个，全都关闭时默认开启账号密码登录。
    </div>
  </div>
</template>

<script>
import {
  getLoingSetting,
  maUserStatusChange,
  maWechatStatusChange,
  pcScanStatusChange,
  pcUserStatusChange,
} from "@/api/system-config/login-methods";
export default {
  name: "login-methods",
  data() {
    return {
      form: {},
    };
  },
  created() {
   // this.getData();
  },
  methods: {
    getData(tip) {
      getLoingSetting().then((res) => {
        this.form = res.data;
        if (tip) {
          this.$message.info(
            "登录方式至少保留一个，全都关闭时默认开启账号密码登录"
          );
        }
      });
    },
    onChangedataStatus(key, value) {
      const map = {
        pcUserpass: pcUserStatusChange,
        pcScan: pcScanStatusChange,
        maUserpass: maUserStatusChange,
        maWechat: maWechatStatusChange,
      };
      let flag = false;
      if (value === "0") {
        if (
          (key === "pcUserpass" && this.form.pcScan === "0") ||
          (key === "pcScan" && this.form.pcUserpass === "0") ||
          (key === "maUserpass" && this.form.maWechat === "0") ||
          (key === "maWechat" && this.form.maUserpass === "0")
        ) {
          flag = true;
        }
      }
      const tip = this.form[key] === "1" ? "禁用" : "启用";
      const color = this.form[key] === "1" ? "#f78989" : "#67C23A";
      const dataStatus = this.form[key] === "1" ? "0" : "1";
      const h = this.$createElement;
      const msg = h("p", null, [
        "是否确定",
        // h("span", { style: `color: ${color}` }, tip),
        h("span", {}, tip),
      ]);
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
      }).then(() => {
        map[key](dataStatus).then(() => {
          if (!flag) {
            this.$message.success(`${tip}成功`);
          }
          this.getData(flag);
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px 24px;
  background-color: #fff;
  height: 100%;
}
.header {
  height: 27px;
  font-size: 20px;
  font-weight: 600;
  color: #2d2d2d;
  line-height: 19px;
  margin-bottom: 27px;
}
.form-item {
  height: 19px;
  font-size: 14px;
  font-weight: 400;
  color: #2d2d2d;
  line-height: 19px;
  margin-bottom: 26px;
}
.c-label {
  margin-left: 29px;
}
.c-tip {
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #8d8d8d;
  line-height: 17px;
}
.c-switch {
  margin-left: 22px;
}
</style>
